<script lang="ts">
	import Divider from '$components/basic/divider/divider.svelte';
	import Button from '@smui/button';
	import Textfield from '@smui/textfield';
	import HelperText from '@smui/textfield/helper-text';

	let value = '';

	const colorList = [
		'#f87171',
		'#fbbf24',
		'#34d399',
		'#60a5fa',
		'#8b5cf6',
		'#ec4899',
		'#22c55e',
		'#facc15'
	];
</script>

<div class="w-full flex-cc flex-col gap-20px py-20px">
	<div class="w-1320px min-w-350px max-w-100% grid grid-cols-3 gap-20px">
		{#each Array(8).fill(0) as item, index}
			<Button
				class="h-200px w-full bg-gray-3 font-size-24px font-500 relative flex-cc gap-20px"
				variant="raised"
			>
				<span class="material-symbols-outlined font-size-100px!"> apps </span>
				<span>System</span>
				<div
					class="absolute font-size-16px bg-red-5 h-20px w-20px rounded-full font-bold right-1em top-0.5em"
				></div>
			</Button>
		{/each}
	</div>
	<!-- <div
		class="w-1320px min-w-350px max-w-100% border border-solid border-color-gray-3 rounded-md p-20px"
	>
		<div class="font-size-24px font-500">Message</div>
		<div class="font-size-20px line-height-60px color-gray font-extralight">
			Please submit any questions here, We will reply as soon as possible
		</div>
		<Divider direction="horizontal" style="--mdc-theme-primary: #d1d5db " />
		<div class="flex flex-row justify-start items-center gap-5px">
			<span class="material-icons color-gray-3">message</span>
			<span>Content</span>
		</div>
		<Textfield
			class="mt-10px"
			style="width: 100%;"
			helperLine$style="width: 100%;"
			textarea
			bind:value
			label="please input your message"
		>
			<HelperText slot="helper">can not contain special characters and violation words</HelperText>
		</Textfield>
		<Button>submit</Button>
	</div> -->
</div>
